<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插件列表</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/ionicons.min.css">
		<link rel="stylesheet" href="../css/AdminLTE.min.css">
		<link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
		<link rel="stylesheet" type="text/css" href="../css/fileinput.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/public_main.css" />
		<style type="text/css">
			body #select_wuye,
			#select_village,
			#select_build,
			#select_unit {
				display: inline-block;
				/*margin-top: 5px;*/
				width: 124px;
				height: 34px;
				margin-left: 10px;
			}
			
			#ppp label {
				margin-left: 10px;
				font-size: 12px;
			}
			
			.remove span {
				cursor: pointer;
			}
			
			.table_cla {
				/*height: 560px;*/
			}
			
			td img {
				height: 18px;
				width: auto;
			}
			
			#ppp #myTabContent #zhuce .two_img {
				width: 75px;
				height: 75px;
			}
			
			#ppp #myTabContent #zhuce .three_img {
				width: 113px;
				height: 113px;
			}
			
			video {
				width: 100%;
				height: auto;
			}
		</style>

	</head>

	<body>
		<div class="box" id="app">
			<div class="box-header with-border">
				<h3 class="box-title">mac板重启记录列表</h3>
			</div>
			<div id="mohu" class="my_feilei">
				<!--<label for="name">物业</label>
				<select id="select_wuye" @change="property_change" v-model="organizeid" style="display: inline-block;" class="form-control">
					<option v-for="item in property_name" :value="item.organizeid" v-text="item.shortname"></option>
				</select>
				<label for="name">小区</label>
				<select id="select_village" v-model="areaid" style="display: inline-block;" class="form-control">
					<option v-for="item in village_name" :value="item.areaid" v-text="item.areaname"></option>
				</select>-->
				<input type="text" name="" id="text_sousuo" v-model="selectinfo" placeholder="请输入需要查询的内容" />
				<button id="search_chaxun" @click="search" type="button" class="btn btn-success">搜索</button>
				
			</div>
			<div style="margin-top: 0px;" class="table_cla">
				<table class="table table-bordered">
					<tr>
						<th>序号</th>
						<th>板子名称</th>
						<th>mac地址 </th>
						<th>重启时间</th>
						<th>重启人</th>						
						<!--<th>创建时间</th>-->						
					</tr>
					<tbody id="tbbb">
						<tr v-for="(item,index) in tabel_data">
							<td v-text="index+1"></td>
							<td v-text="item.boardname"></td>
								<td v-text="item.macadder"></td>
							<td v-text="item.createdate"></td>
							<td v-text="item.createusername"></td>					
						</tr>
					</tbody>
				</table>
			</div>

			<!-- /.box-body -->
			<ul class="pagination" style="margin-left: 10px;">
				<span style="margin-left: 10px;" v-text="count_all"></span>
				<!--<li v-show="current != 1" @click="current-- && goto(current--)">
					<a href="#">上一页</a>
				</li>-->
				<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
					<a href="#" v-text="index"></a>
				</li>
				<!--<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
					<a href="#">下一页</a>
				</li>-->
				<span style="margin-left: 10px;">跳到:</span>
				<!--<input style="width: 50px;height: 34px;" min="1" max="{{allpage}}" type="number" name="goto" id="goto" v-model="jump" />-->
				<input style="width: 50px;height: 28px;" name="goto" id="goto" v-model="jump" type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
				<span>页</span>
				<button type="button" id="gotoo" @click="goto(jump)" class="btn btn-danger ">确定 </button>
			</ul>
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
			
		</div>

	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/qunit-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap-paginator.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<script>
	//	var urlr = "http://192.168.0.30:8085"
	new Vue({
		el: '#app',
		data: {
			urltest: "",
			yanli_url: '',
			tips_modal: "",
			selectinfo: "",
			tabel_data: "",
			current: 1,
			showItem: 5,
			count_all :"",
			rechresult: "",
			allpage: "",
			jump: "",
			userId: "",
			userName: "",
			fullname: "",
		},
		//计算属性
		computed: {

		},
		created: function() {

		},
		mounted: function() {
			var userId = sessionStorage.getItem("userId");
			if(userId == "" || userId == undefined || userId == null) {
				top.location.href = "../login.html";
			} else {
				var that = this;				
				that.urltest = sessionStorage.getItem("urltest");
				that.userId = sessionStorage.getItem("userId");
				that.fullname = sessionStorage.getItem("fullname");
				that.userName = sessionStorage.getItem("userName");				
				var datainit = JSON.stringify({
					requestString: JSON.stringify({
						selectinfo: that.selectinfo,
						pageNumber: 1,
						pageSize: 10
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				that.tabel_loading(datainit);				
			}
		},
		computed: {
			pages: function() {
				var pag = [];
				if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
					//总页数和要显示的条数那个大就显示多少条
					var i = Math.min(this.showItem, this.allpage);
					while(i) {
						pag.unshift(i--);
					}
				} else { //当前页数大于显示页数了
					var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
						i = this.showItem;
					if(middle > (this.allpage - this.showItem)) {
						middle = (this.allpage - this.showItem) + 1
					}
					while(i--) {
						pag.push(middle++);
					}
				}
				return pag
			},
		},
		methods: {
			//加载表格
			tabel_loading: function(data) {
				var that = this;
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + '/verify/watch/selectrestartMacRecord',
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {

						if(msg.responseCode == 200) {
							that.tabel_data = JSON.parse(msg.returnString);
							var data = that.tabel_data;						
							
							var yu = msg.count % 10;
							that.count_all = "共" + msg.count + "条"
							if(yu == 0) {
								that.allpage = parseInt(msg.count / 10);
							} else {
								that.allpage = parseInt(msg.count / 10) + 1;
							}

							for(var i = 0; i < data.length; i++) {
								if(data[i].status == 1) {
									data[i].status = "敬请期待"
								} else if(data[i].status == 2) {
									data[i].status = "可购买安装"
								}
								if(data[i].isexistapp == 1) {
									data[i].isexistapp = "存在"
								} else if(data[i].isexistapp == 0) {
									data[i].isexistapp = "不存在"
								}
							}
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//			分页跳转
			goto: function(index) {
				var that = this;
				if(index == that.current) return;
				if(index > that.allpage) {
					return
				}
				var re = /^[1-9]+[0-9]*]*$/ //判断正整数      // /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字  
				if(!re.test(index)) {
					return false;
				}
				this.current = index;
				var datainit = JSON.stringify({
					requestString: JSON.stringify({
						pageNumber: index,
						pageSize: 10,
						selectinfo: that.selectinfo,
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				that.tabel_loading(datainit);
				//这里可以发送ajax请求
			},
			//搜索
			search: function() {
				var that = this;
				var datainit = JSON.stringify({
					requestString: JSON.stringify({
						pageNumber: 1,
						pageSize: 10,
						selectinfo: that.selectinfo,
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				that.tabel_loading(datainit);

			},
			
		},
	})
</script>
